<template>
    <div class="land">
        <div class="mid-width">
            <el-row>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/index' }">&nbsp;&nbsp;<i class="el-icon-house"></i>&nbsp;&nbsp;首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">{{this.$route.query.typeId | nameTit}}</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            <el-row><h3>&nbsp;</h3></el-row>
            <el-row>
                <div class="text-el" v-loading="loading">
                    <el-row>
                        <el-col :span="6"><i class="el-icon-edit-outline"></i>&nbsp;&nbsp;土地名称：</el-col>
                        <el-col :span="6">{{landData.title }}</el-col>
                        <el-col :span="6"><i class="el-icon-document-checked"></i>&nbsp;&nbsp;土地面积：</el-col>
                        <el-col :span="6">{{landData.acreage }}</el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="6"><i class="el-icon-map-location"></i>&nbsp;&nbsp;所属区域：</el-col>
                        <el-col :span="6">{{landData.area }}</el-col>
                        <el-col :span="6"><i class="el-icon-stopwatch"></i>&nbsp;&nbsp;流转状态：</el-col>
                        <el-col :span="6">{{landData.landState==1?"已流转":landData.landState==0?"未流转":"删除" }}</el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="6"><i class="el-icon-user"></i>&nbsp;&nbsp;联系人：</el-col>
                        <el-col :span="6">{{landData.contacts}}</el-col>
                        <el-col :span="6"><i class="el-icon-mobile-phone"></i>&nbsp;&nbsp;联系方式：</el-col>
                        <el-col :span="6">{{landData.contactsWay}}</el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="6"><i class="el-icon-date"></i>&nbsp;&nbsp;审核状态：</el-col>
                        <el-col :span="6">{{landData.auditState==1?"已审核":"未审核"}}</el-col>
                        <el-col :span="6"><i class="el-icon-key"></i>&nbsp;&nbsp;土地用途：</el-col>
                        <el-col :span="6">{{landData.purpose }}</el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="6"><i class="el-icon-wind-power"></i>&nbsp;&nbsp;流转类型：</el-col>
                        <el-col :span="6">{{landData.transferType}}</el-col>
                        <el-col :span="6"><i class="el-icon-timer"></i>&nbsp;&nbsp;流转年限：</el-col>
                        <el-col :span="6">{{landData.transferDate}}</el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>

            </el-row>
        </div>
    </div>
</template>

<script>
    import {apiData} from '../interface/api';
    import {tool} from '../tool/index';
    export default {
        name: "land",
        data(){
            return {
                loading:false,
                landData: {},
                typeId:this.$route.query.typeId,
                landId:this.$route.query.landId,
                curPage:1,
                pageSize:10
            }
        },
        methods:{
            async landList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                console.log(res)
                if(res.data){
                    this.loading = false;
                    this.landData = res.data.list[0]
                } else {
                    this.loading = true;
                    this.$message({
                        message: '数据加载失败',
                        type: 'warning'
                    });
                }

            }
        },
        mounted(){
            this.landList("post", `/web/landList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {landId:this.landId})
        },
        filters:{
            formatDate(val) {
                const value=new Date(val);
                const year=value.getFullYear();
                const month= tool.padDate(value.getMonth()+1);
                const day = tool.padDate(value.getDate());
                const hour = tool.padDate(value.getHours());
                const minutes = tool.padDate(value.getMinutes());
                const seconds = tool.padDate(value.getSeconds());
                return `${year}-${month}-${day}`;
            },
            nameTit(id){
                let pageTit =4;
                switch (id){
                    case 1:
                        pageTit = "政策法规";
                        break;
                    case 2:
                        pageTit = "通知公告";
                        break;
                    case 3:
                        pageTit = "文件下载";
                        break;
                    case 4:
                        pageTit = "土地信息";
                        break;
                }
                return pageTit
            },
            fontSize(title){
                if(title.length>=50){
                    return `${title.slice(0, 45)}...`
                } else {
                    return title
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .land{
        .text-el {
            min-height: 532px;
            border-radius: 5px;
            border: 1px solid #eee;
            padding: 20px;
            h3 {
                &.title-el {
                    text-align: center;
                    font-size: 22px;
                    line-height: 32px;
                }
            }
        }
    }
</style>